<template>
  <div class="enterprise-info-container">
    <div class="page-header">
      <h1>企业信息</h1>
    </div>
    
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>企业基本信息</span>
          <el-button type="primary" @click="editMode = true" v-if="!editMode">编辑</el-button>
          <div v-else>
            <el-button type="primary" @click="saveEnterprise">保存</el-button>
            <el-button @click="cancelEdit">取消</el-button>
          </div>
        </div>
      </template>
      
      <div class="enterprise-form">
        <el-form 
          :model="enterpriseForm" 
          :rules="rules" 
          ref="enterpriseFormRef" 
          label-position="right" 
          label-width="120px"
          :disabled="!editMode"
        >
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12">
              <el-form-item label="企业名称" prop="name">
                <el-input v-model="enterpriseForm.name" placeholder="请输入企业名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12">
              <el-form-item label="统一社会信用代码" prop="creditCode">
                <el-input v-model="enterpriseForm.creditCode" placeholder="请输入统一社会信用代码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12">
              <el-form-item label="法人代表" prop="legalPerson">
                <el-input v-model="enterpriseForm.legalPerson" placeholder="请输入法人代表"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="enterpriseForm.phone" placeholder="请输入联系电话"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12">
              <el-form-item label="成立日期" prop="establishDate">
                <el-date-picker 
                  v-model="enterpriseForm.establishDate" 
                  type="date" 
                  placeholder="请选择成立日期"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12">
              <el-form-item label="企业类型" prop="type">
                <el-select v-model="enterpriseForm.type" placeholder="请选择企业类型" style="width: 100%">
                  <el-option label="有限责任公司" value="LLC"></el-option>
                  <el-option label="股份有限公司" value="Corporation"></el-option>
                  <el-option label="个人独资企业" value="SoleProprietorship"></el-option>
                  <el-option label="合伙企业" value="Partnership"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="经营范围" prop="businessScope">
            <el-input 
              v-model="enterpriseForm.businessScope" 
              type="textarea" 
              :rows="3" 
              placeholder="请输入经营范围"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="注册地址" prop="address">
            <el-input v-model="enterpriseForm.address" placeholder="请输入注册地址"></el-input>
          </el-form-item>
          
          <el-form-item label="企业Logo" prop="logo">
            <el-upload
              class="avatar-uploader"
              action="/api/file/upload"
              :show-file-list="false"
              :on-success="handleLogoSuccess"
              :before-upload="beforeLogoUpload"
              :disabled="!editMode"
            >
              <img v-if="enterpriseForm.logo" :src="enterpriseForm.logo" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          
          <el-form-item label="营业执照" prop="license">
            <el-upload
              class="license-uploader"
              action="/api/file/upload"
              :show-file-list="false"
              :on-success="handleLicenseSuccess"
              :before-upload="beforeLicenseUpload"
              :disabled="!editMode"
            >
              <img v-if="enterpriseForm.license" :src="enterpriseForm.license" class="license-img" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    
    <el-card class="contact-card">
      <template #header>
        <div class="card-header">
          <span>联系人信息</span>
        </div>
      </template>
      
      <div class="contacts-table">
        <div class="table-actions" v-if="editMode">
          <el-button type="primary" @click="addContact">添加联系人</el-button>
        </div>
        
        <el-table :data="contacts" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="position" label="职位" width="150"></el-table-column>
          <el-table-column prop="phone" label="电话" width="150"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column label="操作" width="120" v-if="editMode">
            <template #default="scope">
              <el-button type="danger" size="small" @click="removeContact(scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import type { UploadProps } from 'element-plus'

// 编辑模式状态
const editMode = ref(false)

// 表单引用
const enterpriseFormRef = ref<FormInstance>()

// 企业表单数据
const enterpriseForm = reactive({
  name: '',
  creditCode: '',
  legalPerson: '',
  phone: '',
  establishDate: '',
  type: '',
  businessScope: '',
  address: '',
  logo: '',
  license: ''
})

// 联系人列表
const contacts = ref([
  { name: '张三', position: '总经理', phone: '13800138000', email: 'zhangsan@example.com' },
  { name: '李四', position: '销售总监', phone: '13900139000', email: 'lisi@example.com' }
])

// 表单验证规则
const rules = reactive({
  name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  creditCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
  legalPerson: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  address: [{ required: true, message: '请输入注册地址', trigger: 'blur' }]
})

// 获取企业信息
const fetchEnterpriseInfo = async () => {
  // 模拟数据，实际项目中应该从API获取
  Object.assign(enterpriseForm, {
    name: '冷食兔食品有限公司',
    creditCode: '91310000MA1FL4CT8R',
    legalPerson: '王大明',
    phone: '021-88888888',
    establishDate: '2020-05-15',
    type: 'LLC',
    businessScope: '食品生产与销售，冷冻食品加工，食品技术开发，货物及技术进出口业务',
    address: '上海市浦东新区张江高科技园区博云路2号',
    logo: 'https://placeholder.com/150',
    license: 'https://placeholder.com/300x400'
  })
}

// Logo上传成功处理
const handleLogoSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  enterpriseForm.logo = response.url
  ElMessage.success('Logo上传成功!')
}

// Logo上传前验证
const beforeLogoUpload: UploadProps['beforeUpload'] = (file) => {
  const isImage = /image\/(jpeg|png|jpg)/.test(file.type)
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('Logo只能是JPG、PNG格式!')
  }
  
  if (!isLt2M) {
    ElMessage.error('Logo大小不能超过2MB!')
  }
  
  return isImage && isLt2M
}

// 营业执照上传成功处理
const handleLicenseSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  enterpriseForm.license = response.url
  ElMessage.success('营业执照上传成功!')
}

// 营业执照上传前验证
const beforeLicenseUpload: UploadProps['beforeUpload'] = (file) => {
  const isImage = /image\/(jpeg|png|jpg)/.test(file.type)
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) {
    ElMessage.error('营业执照只能是JPG、PNG格式!')
  }
  
  if (!isLt5M) {
    ElMessage.error('营业执照大小不能超过5MB!')
  }
  
  return isImage && isLt5M
}

// 添加联系人
const addContact = () => {
  contacts.value.push({
    name: '',
    position: '',
    phone: '',
    email: ''
  })
}

// 移除联系人
const removeContact = (index: number) => {
  contacts.value.splice(index, 1)
}

// 保存企业信息
const saveEnterprise = async () => {
  if (!enterpriseFormRef.value) return
  
  await enterpriseFormRef.value.validate((valid) => {
    if (valid) {
      // 这里应该调用API保存数据
      ElMessage.success('企业信息保存成功!')
      editMode.value = false
    } else {
      return false
    }
  })
}

// 取消编辑
const cancelEdit = () => {
  ElMessageBox.confirm(
    '确定取消编辑？未保存的更改将会丢失',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    editMode.value = false
    fetchEnterpriseInfo() // 重新加载数据
  }).catch(() => {})
}

// 组件挂载时加载数据
onMounted(() => {
  fetchEnterpriseInfo()
})
</script>

<style scoped>
.enterprise-info-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.info-card,
.contact-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-size: 16px;
  font-weight: 500;
}

.enterprise-form {
  max-width: 1200px;
}

.avatar-uploader,
.license-uploader {
  display: flex;
  justify-content: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.avatar-uploader {
  width: 150px;
  height: 150px;
}

.license-uploader {
  width: 300px;
  height: 200px;
}

.avatar-uploader:hover,
.license-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
  object-fit: cover;
}

.license-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.table-actions {
  margin-bottom: 15px;
}
</style> 